<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1892202_vz0dyjhocgo.css">
    <link rel="stylesheet" href="/css/shopping-cart.css">
</head>
<body>
    <header></header>

    <section>
        <div class="container" id="shopping-car">
            <div class="head">
                <label>
                    <input type="checkbox" class="all-check" >全选
                </label>
                
                <ul>
                    <li>商品</li>
                </ul>
                <ol>
                    <li>单价</li>
                    <li>数量</li>
                    <li>小计</li>
                    <li>操作</li>
                </ol>
            </div>
            <div class="body">
                <script type="text/html" id="cartTemplate">
                    {{each cart shop}}
                    <li data-id="{{shop.id}}">
                        <input class="shop checks" type="checkbox" {{shop.checked &&"checked"}}>
                        <img src="{{shop.imgs[0]}}" alt="">
                        <h5>
                            <a href="/html/shopping.html?id={{shop.id}}">
                                {{shop.title}}
                            </a>
                            <p>黑色</p>
                        </h5>
                        <p class="price">￥{{(shop.price).toFixed(2)}}</p>
                        <div>
                            <a href="javascript:;" class="redu {{shop.count===1?'dis':''}}">-</a>
                            <input type="text" value="{{shop.count}}">
                            <a href="javascript:;" class="add">+</a>
                        </div>
                        <p class="price2" >￥{{(shop.price*shop.count).toFixed(2)}}</p>
                        <span class="del">
                            <p>删除</p>
                        </span>
                    </li>
                    {{/each}}
                </script>
                <ul id="shop-body"></ul>
            </div>
            <div class="foot">
                <div class="left">
                    <label>
                        <input class="all-check" type="checkbox">全选
                    </label>
                    <span id="clearBtn">清空购物车</span>
                </div>
                <div class="right">
                    <p class="settlement">立即结算</p>
                    <div class="total">
                        <div>
                            总计：<span id="paymoney">¥ 0.00</span>
                        </div>
                        <p>已选择<i> 0</i>件商品，优惠： <b>¥ 0.00</b></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="noshopping container" id="cart-empty">
            <img src="/img/noshopping.png" alt="">
            <p>您的购物车里什么也没有哦~</p>
            <a href="/html/list.html">去逛逛</a>
        </div>
    </section>
<!--  -->
    <footer></footer>
</body>
<script src="/libs/require/require.min.js" data-main="/js/shopping-cart"></script>
</html>